<template>
	<view class="container box">
		<view class="pwd-items">
			<view class="item" v-for="(label,ind) in labels">
				<span>{{ label}}</span>
				<input v-if="ind==0" @blur="initial_pwdFn" v-model.trim="values[ind]" type="text"
					:placeholder='label+"不能为空"' placeholder-style="color:#DCDCDC ;font-size:0.8rem;font-weight:400" />
				<input v-else-if="ind==1" @blur="pwdFn" v-model.trim="values[ind]" type="text"
					:placeholder='label+"不能为空"' placeholder-style="color:#DCDCDC ;font-size:0.8rem;font-weight:400" />
				<input v-else @blur="rePwdFn" v-model.trim="values[ind]" type="text" :placeholder='label+"不能为空"'
					placeholder-style="color:#DCDCDC ;font-size:0.8rem;font-weight:400" />
				<uni-icons v-if="values[ind]" type="close" size="20" color="#DCDCDC"
					@click="values[ind]='';$forceUpdate()"></uni-icons>
			</view>
		</view>
		<view class="btn-save">
			<button type="primary" @click='save'>保存</button>
		</view>
	</view>
</template>

<script>
	import {
		check,
		verify
	} from '../../../database/index.js'
	import {
		pwdVerify
	} from '../../../util/verify.js'
	export default {
		data() {
			return {
				ind: '',
				labels: [
					'原始密码', '新密码', '确认密码'
				],
				values: ['', '', '']
			}
		},
		async onLoad() {

		},
		methods: {
			initial_pwdFn() {
				if (!this.values[0]) {
					this.$showMsg('原始密码输入不能为空')
					return false
				}
				return true
			},
			pwdFn() {
				if (!this.values[1]) {
					this.$showMsg('新密码输入不能为空')
					return false
				}
				let [res, msg] = pwdVerify(this.values[1])
				if (!res) {
					this.$showMsg(`新${msg}`)
					return false
				}
				return true
			},
			rePwdFn() {
				if (!this.values[2]) {
					this.$showMsg('确认密码输入不能为空')
					return false
				}
				let [res, msg] = pwdVerify(this.values[2])
				if (!res) {
					this.$showMsg(`确认${msg}`)
					return false
				}
				if (this.values[1] != this.values[2]) {
					this.$showMsg('前后密码不一致')
					return false
				}
				return true
			},
			async save() {
				if (this.initial_pwdFn() && this.pwdFn() && this.rePwdFn()) {
					let [res, msg] = await check('user', [{
						_id: this.$store.getters.getToken,
						user_pwd: this.values[0]
					}])
					if (res) {
						this.$showMsg('密码错误')
						return
					}
					let [res1, msg1] = await verify('user', {
						_id: this.$store.getters.getToken
					}, {
						user_pwd: this.values[1]
					})
					this.$showMsg(msg1)
				}

			}
		}
	}
</script>
<style lang="scss" scoped>
	@import '../../../static/styles/common.scss';

	.box {
		padding: 0;

		.pwd-items {
			padding: 10rpx 20rpx;

			.item {
				display: flex;
				flex: row;
				justify-content: left;
				background-color: white;
				margin-bottom: 15rpx;
				border-radius: 10rpx;
				color: #6495ED;
				font-weight: bold;
				padding: 10rpx 20rpx;
				border-radius: 5rpx;
				letter-spacing: 0.2rem;

				font-size: 0.9rem;

				span {
					width: 150rpx;
					margin-right: 20rpx;
				}

				input {
					color: #4682B4;
					font-weight: 400;
					letter-spacing: 1rpx;
					font-size: 0.9rem;
				}
			}

		}
	}

	.btn-save {
		position: absolute;
		bottom: 10%;
		margin-top: 100rpx;
		width: 100%;

		button {
			letter-spacing: 4rpx;
			text-align: center;
			background-color: #292929;
			width: 300rpx;
		}
	}
</style>